<template>
    <div class="cardtitlebox" ref="cardtitlebox">
        <p class="title"><span class="titleS">{{title}}</span>
            <span>
                <slot name="rightoperate">
                </slot>
            </span>
        </p>
        <div class="operatecontent" v-if="list>0">
            <slot name="operatecontent">
            </slot>
        </div>
        <div class="cardconbox" v-else>
            <div>
                <svg-icon class="iconBox" icon-class="zanwuyichang" />
                <div>暂无异常</div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        defineComponent,
        reactive,
        toRefs,
        onMounted,
        watchEffect,
        defineProps
    } from "vue";
    import usePagesStore from "@/store/modules/pages";
    const pagesStore = usePagesStore();
    export default defineComponent({
        props: {
            title: {
                type: String,
                default: '区域断电'
            },
            list: {
                type: Number,
                default: 0
            }
        },
        setup(props) {
            const state = reactive({});
            onMounted(() => {})

            return {
                props,
                ...toRefs(state),
            };
        },
    });
</script>
<style lang="scss">
    .ayasTableListBox {
        font-size: 14px;
        color: rgba(62, 70, 79, 1);
        .tableBottom {
            margin: 2px 0;
            &:nth-child(1) {
                background: linear-gradient(90deg, rgba(255, 226, 224, 1) 0%, rgba(255, 226, 224, 0) 100%);
            }

            &:nth-child(2) {
                background: linear-gradient(90deg, rgba(255, 222, 204, 1) 0%, rgba(255, 222, 204, 0) 100%);
            }

            &:nth-child(3) {
                background: linear-gradient(90deg, rgba(255, 241, 209, 1) 0%, rgba(255, 241, 209, 0) 100%);
            }
            span{
                
                em{
                    margin-left: 4px;
                    transform: rotate(45deg);
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    text-align: center;
                    line-height: 15px;
                    i{
                        display: inline-block;
                        font-style: normal;
                        transform: rotate(-45deg);
                        color: #333;
                    }
                }
            }
        }

        .tableBottom,
        .tableTop {
            span {
                display: inline-block;

                &:nth-child(1) {
                    width: 10%;
                }

                &:nth-child(2) {
                    width: 25%;
                }

                &:nth-child(3) {
                    width: 15%;
                }

                &:nth-child(4) {
                    width: 50%;
                }
            }
        }
    }

    .yichangBox {
        display: flex;
        justify-content: space-around;

        .itemBox {
            text-align: center;

            p {
                font-size: 14px;
                color: rgba(62, 70, 79, 1);
            }

            .num {
                font-size: 18px;
                color: rgba(255, 85, 85, 1);
                font-weight: 700;
            }
        }

    }

    .ayasTjBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .ayasTjBoxdesc {
            width: 49%;
            text-align: center;
            border-radius: 4px;
            border: 1px solid rgba(68, 136, 255, 0.08);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.02);
            padding: 8px 8px 8px 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 14px;
            color: rgba(62, 70, 79, 1);
            margin-top: 10px;

            p {
                padding: 10px 0;
                margin: 0;

            }

            em {
                font-size: 18px;
                font-weight: 700;
                margin-right: 8px;
                font-style: normal;
                color: rgba(255, 153, 0, 1);
            }
        }
    }

    .cardconbox {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: rgba(182, 191, 204, 1);
        font-size: 14px;

        .bi-svg {
            width: 76px !important;
            height: 76px !important;
        }
    }

    .rightayasSel {
        display: flex;
        font-size: 14px;
        height: 22px;
        line-height: 22px;

        span {
            padding: 0 6px;
            cursor: pointer;
        }

        .active {
            background-color: rgba(68, 136, 255, 0.16);
            color: rgba(68, 136, 255, 1);
            font-weight: 700;
        }
    }

    .cardtitlebox {
        min-height: 180px;

        .title {
            margin: 12px 0 0 0;
            line-height: 32px;
            height: 32px;
            background: linear-gradient(90deg, rgba(68, 136, 255, 0.04) 0%, rgba(68, 136, 255, 0.04) 100%);
            display: flex;
            justify-content: space-between;

            .titleS {
                font-size: 16px;
                font-weight: 700;
                color: rgba(62, 70, 79, 1);
                padding: 0 12px;
            }
        }
    }
</style>